<template>
    <div class="page reportApply-page" data-page="reportApply" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()"> 
                <i class="iconfont icon-zuo"></i> 
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">报表</div>
            <a class="link popover-open" data-popover="#reportApply_menu" id="content_select"> 
                <i class="iconfont icon-APPicon_shaixuan1" id="active" style="font-size:24px"></i> 
            </a>
        </div>
        <div class="page-content">
            <div class="page-content infinite-scroll-content ptr-content"
                style=" padding-bottom: 80px;" 
                data-infinite-distance="50" 
                @infinite="loadMore"
                @ptr:refresh="refreshMaintainList">
                <div class="ptr-preloader" >
                    <div class="preloader color-multi"></div>
                    <div class="ptr-arrow"></div>
                </div>
                <div class="list media-list no-hairline-bottom">
                    <div class="report-container" id="report-container">
                    </div>
                </div>
                <div class="preloader infinite-scroll-preloader"></div>
            </div>
        </div>
        <div class="popover select-option-con" id="reportApply_menu">
            <div class="popover-angle"></div>
            <div class="popover-inner">
                <div class="list">
                    <ul>
                        <li><a href="" class="list-button item-link popover-close" id="reportApply_org">选择单位</a></li>
                        <li><a href="" class="list-button item-link popover-close" id="dector_type_report">报表类型</a></li>
                        <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
              pageSize: 20,//分页参数(每页显示条数)
              pageIndex: 0,//分页参数
              reportType:0,//1 报告 2报表 全部不传
              allowInfinite: true,
              currentOrgId:"",
              pageOrgIds:"",
              showSelect: 0,
            }
        },
        methods: {
            loadMore:function(){
                var self = this;
                if (!self.allowInfinite) return;
                  self.allowInfinite = false;
                setTimeout(function () {
                  self.pageIndex++;
                  self.getReportList();
                  self.allowInfinite = true;
                    }, 1000);
              },
              reInit:function(){
                  var self = this;
                  self.pageIndex = 0;
                  $(".page-content").scrollTop(0,300);
                  $("#report-container").empty();
                  if(!self.allowInfinite){
                      self.allowInfinite = true;
                      jQuery('.reportApply-page .preloader').show();
                  }
              },
              refreshMaintainList: function (e, done) {
                  if (done && e) {
                      var self = this;
                      var $ = self.$$;
                      setTimeout(function () {
                          self.reInit();
                          jQuery('.reportApply-page .preloader').hide();
                          self.getReportList();
                          done();
                      }, 1000);
                  }
              },
            getReportList:function(){
                var self = this;
                //筛选按钮有值变色
                if (self.showSelect) {
                    if(jQuery("#reportApply_org")[0].innerText != "选择单位" || jQuery("#dector_type_report")[0].innerText != "报表类型"){
                        jQuery("#active").addClass("select-active");
                    }else{
                        jQuery("#active").removeClass("select-active");
                    }
                }
            	Dao.getReportList({
                    orgIds:self.currentOrgId,
                    reportType:self.reportType,
            		pageIndex:self.pageIndex,
            		pageSize:self.pageSize,
            	},function(data,total){
            		if(data && data.length>0){
                        if (data.length < self.pageSize) {
                            jQuery('.reportApply-page .preloader').hide();
                            self.allowInfinite = false;
                        } else {
                            jQuery('.reportApply-page .preloader').show();
                            self.allowInfinite = true;
                        }
            			for(var i=0;i<data.length;i++){
                            let oneData = data[i]
                            let orgName = oneData.reportName || ''
            				if(oneData.reportType==2){//2 报表
                                if(oneData.period==1){//报告周期 1 周 2 月 3年 5季]
            						var sTimes=oneData.startTime.split('-');
            						var startTimeStr=sTimes[1]+"月"+sTimes[2]+"日"
            						var eTimes=oneData.endTime.split('-');
            						var endTimeStr=eTimes[2]+"日";
		            				$("#report-container").append(`<a href="/reportApplyDetail/`+oneData.id+`/`+oneData.isUnit+`/`+oneData.reportName+`/1/1/" class="each">
	                	            	<div class="tittle">
	    	                            	<div class="text">`+ orgName +`消防周报</div>
	    	                            	<div class="time">`+startTimeStr+` - `+endTimeStr+`</div>
	                                	</div>
	                                	<i class="iconfont icon-tuijianbaobiao"></i>
		            				</a>`);
            					}else if(oneData.period==2){
                                    var sTimes=oneData.startTime.split('-');
            						var startTimeStr=sTimes[1]+"月"+sTimes[2]+"日"
            						var eTimes=oneData.endTime.split('-');
            						var endTimeStr=eTimes[2]+"日";
		            				$("#report-container").append(`<a href="/reportApplyDetail/`+oneData.id+`/`+oneData.isUnit+`/`+oneData.reportName+`/1/2/" class="each">
	                	            	<div class="tittle">
	    	                            	<div class="text">`+ orgName +`消防月报</div>
	    	                            	<div class="time">`+startTimeStr+` - `+endTimeStr+`</div>
	                                	</div>
	                                	<i class="iconfont icon-tuijianbaobiao"></i>
		            				</a>`);
            					} else if(oneData.period==3){
                                    // 单位年报
                                    var mTimes=oneData.endTime.split('-');
            						var monTimeStr=mTimes[0]+"年"
            						$("#report-container").append(`<a href="/reportApplyDetail/${oneData.id}/${oneData.period}/${oneData.reportName}/${mTimes[0]}/3/" class="each nth-child3">
	                	            	<div class="tittle">
	    	                            	<div class="text">`+ orgName +`消防年报</div>
	    	                            	<div class="time">`+monTimeStr+`</div>
	                                	</div>
	                                	<i class="iconfont icon-tuijianbaobiao"></i>
		            				</a>`);
                                }
                                else if(oneData.period==4){
                                    // 平台年报
                                    var mTimes=oneData.endTime.split('-');
            						var monTimeStr=mTimes[0]+"年"
            						$("#report-container").append(`<a href="/reportApplyDetail/${oneData.id}/${oneData.period}/${oneData.reportName}/${mTimes[0]}/4/" class="each nth-child3">
	                	            	<div class="tittle">
	    	                            	<div class="text">`+ orgName +`消防平台年报</div>
	    	                            	<div class="time">`+monTimeStr+`</div>
	                                	</div>
	                                	<i class="iconfont icon-tuijianbaobiao"></i>
		            				</a>`);
                                }else if(oneData.period==5){
                                    var sTimes=oneData.startTime.split('-');
            						var startTimeStr=sTimes[1]+"月"+sTimes[2]+"日"
            						var eTimes=oneData.endTime.split('-');
            						var endTimeStr=eTimes[1]+"月"+eTimes[2]+"日";
		            				$("#report-container").append(`<a href="/reportApplyDetail/`+oneData.id+`/`+oneData.isUnit+`/`+oneData.reportName+`/1/5/" class="each">
	                	            	<div class="tittle">
	    	                            	<div class="text">`+ orgName +`消防季报</div>
	    	                            	<div class="time">`+startTimeStr+` - `+endTimeStr+`</div>
	                                	</div>
	                                	<i class="iconfont icon-tuijianbaobiao"></i>
		            				</a>`);
                                }
            				}else{//1报告
            					var mTimes=oneData.endTime.split('-');
        						var monTimeStr=mTimes[0]+"年"+mTimes[1]+"月";
                                $("#report-container").append(`<a href="/maintenceReport/`+oneData.id+`/`+orgName+`/`+monTimeStr+`/" class="each  nth-child1">
       	                            <div class="tittle">
       	                              <div class="subtext">`+ orgName +`消防设施维保报告</div>
       	                              <div class="text">月报</div>
       	                              <div class="time">`+monTimeStr+`</div>
       	                            </div>
       	                            <i class="iconfont icon-APP-1"></i>
   	            				</a>`);
            				}
            			}
            		}else{
	                    if (self.pageIndex == 0) { //暂无数据
                            self.allowInfinite = false;
                            jQuery('.reportApply-page .preloader').hide();
	            			$("#report-container").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
	                    }
            		}
            	});
            },
            removeScreen:function(){
                var self = this;
                jQuery("#reportApply_org,#dector_type_report").removeClass('select-active');
                jQuery("#reportApply_org").html("选择单位");
                jQuery("#dector_type_report").html("报表类型");
                self.currentOrgId = self.pageOrgIds;
                self.reportType = 0; 
                self.reInit();
                self.getReportList();
            },
            initBindFn:function(){
                var self = this;
                if (self.showSelect == true) {
                    jQuery('#content_select').show();
                    if(userInfor.isMuilUnitUser){
                        //选择单位
                        jQuery("#reportApply_org").off().show().click(function () {
                            jQuery("#reportApply_org").removeClass('select-active');
                            loadSelectUnitFunc(function (data) {
                                //选中
                                if (self.currentOrgId != data.orgId) {
                                    self.currentOrgId = data.orgId;
                                    jQuery("#reportApply_org").html(data.orgName);
                                    jQuery("#reportApply_org").addClass('select-active');
                                } else {
                                    jQuery("#reportApply_org").html("选择单位");
                                    self.currentOrgId = self.pageOrgIds;
                                }
                                self.reInit();
                                self.getReportList();
                            }, self.currentOrgId.indexOf(',')>-1?'': self.currentOrgId);
                        });
                    }else{
                        jQuery("#reportApply_org").off().hide();
                        self.currentOrgId = self.pageOrgIds;
                    }
                    //报表类型
                    let selectOptionIndex = null;
                    jQuery("#dector_type_report").click(function (e) {
                        selectOptionFn([{ "id": 1, "name": "消防报告" }, { "id": 2, "name": "消防报表" }], function (data) {
                            $("#dector_type_report").removeClass("select-active");
                            if (self.reportType == data.id) {
                                jQuery("#dector_type_report").html("报表类型");
                                self.reportType = 0;
                            } else {
                                $("#dector_type_report").addClass("select-active");
                                jQuery("#dector_type_report").html(data.name);
                                self.reportType = data.id;
                            }
                            self.reInit();
                            self.getReportList();
                            if (selectOptionIndex != data.index) {
                                selectOptionIndex = data.index;
                            } else {
                                selectOptionIndex = "";
                            }
                        }, selectOptionIndex);
                    });
                } else {
                    jQuery('#content_select').hide();
                    jQuery("#reportApply_org").off().hide();
                    self.currentOrgId = self.pageOrgIds;
                }
            }
        },
        on: {
          pageInit: function(e, page) {
            var self = this;
            self.pageOrgIds = self.$route.params.orgIds;
            self.showSelect = self.$route.params.showSelect;
            self.currentOrgId = self.pageOrgIds;
            self.initBindFn();
            self.reInit();
            self.getReportList();
          },
        }
    }
</script>
<style scoped>
      .report-container{
        margin: 10px 20px;
      }
      .report-container .each{
        width: 47%;
        height: 120px;
        background:linear-gradient(135deg,rgba(32,138,247,1),rgba(79,189,252,1));
        border:1px solid rgba(225, 225, 225, 0.4);
        box-shadow:0px 0px 15px 0px rgba(205,205,205,0.2);
        border-radius:8px;
        float: left;
        margin-right: 10px;
        margin-bottom: 6px;
        position: relative;
      }
      /*偶数*/
      .report-container .each:nth-of-type(even){
        margin-right:0;
      }
      .report-container .nth-child1{
        background:linear-gradient(135deg,rgba(223,110,251,1),rgba(227,150,241,1));
      }
      .report-container .nth-child2{
        background:linear-gradient(135deg,rgba(179,127,250,1),rgba(209,176,255,1));
      }
      .report-container .nth-child3{
        background:linear-gradient(135deg,#e84e35  ,#f97b66);
      }
      .report-container .each .tittle{
        padding: 15px 10px;
      }
      .report-container .each .subtext{
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
      .report-container .each .text{
        font-size: 18px;
        color: #fff;
        font-weight: bold;
      }
    .report-container .each .time{
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
    } 
    .report-container .each .iconfont{
        font-size: 68px;
        position: absolute;
        right: 8px;
        bottom: -10px;
        color: rgba(255, 255, 255, 0.2);
    } 
    .media-list {
        width: 100%;
        margin-top: 0px;
        height: initial;
        display: inline-block;
        background-color: #fff;
    }    
</style>